<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>K5G-C</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/wifi.css" />
</head>
<body>
    <div class="main">
        <div class="tit-heade">
            <div class="itemOne">
                <img src="./image/left.png" >
            </div>
            <div class="itemTwo">
                <div class="item-chil">
                    <img src="./image/logoutOne.png">
                </div>
                <div class="item-chil">
                    <a href="/action/logout">ログアウト</a>
                </div>
                
            </div>
        </div>  
        <div class="nav2">
            <div class="nav-item">
                <div id='x1' class="item " onclick="toPage('./home.html')">ホーム</div>
            </div>
            <div class="nav-item">
                <div id='x2' class="item no-act" onclick="toPage('./mobileData.html')">モバイルネットワーク</div>
            </div>  
            <div class="nav-item">
                <div id='x3' class="item no-act" onclick="toPage('./wifi.html')">Wi-Fi設定</div>
                <div class="">
                    <div>
                        <div class="">
                            <div class="item1" id="wifi1" onclick="toPage('./wifi.html')">アクセスポイント設定</div>
                            <div class="item1" id="wifi2" onclick="toPage('./wifiList.html')">Wi-Fi接続情報</div>
                            <div class="item1 choose" id="wifi_list" onclick="toPage('./wifiManage.html')">接続デバイスの管理</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nav-item">
                <div id='x4' class="item no-act" onclick="toPage('./dhcp.html')">Ethernet設定</div>
                <div class="hide">
                    <div>
                        <div id='x41' class="item1 no-act">DHCP固定割当設定</div>
                        <div class="">
                            <div class="item2" id="DHCP">DHCP固定割当設定</div>
                            <div class="item2" id="MAC">MAC IP Bindingリスト</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nav-item">
                <div id='x5' class="item no-act" onclick="toPage('./port.html')">LAN設定</div>
                <div class="hide">
                    <div>
                        <div id='x51' class="item no-act">ポートフォワーディング</div>
                        <div class="hide">
                            <div class="item2" id="port">ポートフォワーディング</div>
                            <div class="item2" id="port_list">ポートフォワーディングリスト</div>
                        </div>
                    </div>
                    <div>
                        <div id='x52' class="item1 no-act">IPパケットフィルタリング</div>
                        <div class="hide">
                            <div class="item2" id="IP">IPパケットフィルタリング</div>
                            <div class="item2" id="IP_list">IPパケットフィルタリングリスト</div>
                        </div>
                    </div>
                    <div>
                        <div id='x53' class="item1 no-act"
                             onclick="toPage('./dmz.html')">
                            DMZ
                        </div>
                    </div>
                    <div>
                        <div id='x54' class="item1 no-act">IPV6パケットフィルタリング</div>
                        <div class="hide">
                            <div class="item2" id="IPV6">IPV6パケットフィルタリング</div>
                            <div class="item2" id="IPV6_list">IPV6パケットフィルタリングリスト</div>
                        </div>
                    </div>
                    <div>
                        <div id='x55' class="item1 no-act"
                             onclick="toPage('./dmz.html')">
                            WANポートPingブロック</div>
                    </div>
                </div>
            </div>
            <div class="nav-itm">
                <div id='x6' class="item no-act" onclick="toPage('./password.html')">端末設定</div>
                <div class="hide">
                    <div>
                        <div class="">
                            <div class="item" onclick="toPage('./password.html')">パスワード設定</div>
                            <div class="item" onclick="toPage('./dataUsage.html')">データ使用量</div>
                            <div class="item" onclick="toPage('./reboot.html')">リブート</div>
                            <div class="item" onclick="toPage('./deviceInformation.html')">デバイス情報</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="wifi-list" class="content">
            <div class="title">接続デバイスの管理</div>
            <div style="margin-left: 100px;margin-top: 10px;">
                本機に接続可能なデバイスをMACアドレスで制限することができます。
            </div>
            <div class="mac" style="padding: 0 5%">
                <form action="" class="default-form">
                    <div class="line-box">
                        <label for="device_name">デバイス名</label>
                        <input type="text"  class="line-input" name="device_name" id="device_name" />
                        <label for="mac">MACアドレス</label>
                        <input type="text" class="line-input" name="mac" id="mac" />
                        <div class="submit-btn"  onclick="macAdd()">追加</div>
                    </div>
                </form>
                <table class="default-table" id="wifi-table">
                    <thead>
                      <tr>
                        <th width="25%">No</th>
                        <th width="25%">デバイス名</th>
                        <th width="25%">MACアドレス</th>
                        <th width="25%"><div></div></th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <div class="horizontal-box" style="margin:40px">
                    <div class="submit-btn" onclick="freshen_click()">リストを同期</div>
                    <div id="effective" class="submit-btn" onclick="white_list()">制限を有効</div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="./js/utils.js"></script>
    <script>
        window.onload = function () {
            getData()
            getSimNum()
        }

        function getSimNum() {
            var num = sessionStorage.getItem('activeSimNumber')
            if (num == 0) {
                var btn = document.getElementById('x2')
                btn.onclick = function() {}
                btn.style.backgroundColor = '#eee'
            }
            var params = {}
            Ajax.post(baseUrl + '/action/getActiveSimCardNumber', JSON.stringify(params), function(res) {
                var response = JSON.parse(res)
                if (response.status == 'success') {
                    sessionStorage.setItem('activeSimNumber', response.data.activeSimNumber)
                }
            })
        }
        function getData() {
            Ajax.get(baseUrl + '/action/whitelistGet',function(res) {
                var response = JSON.parse(res)
                if(response.status == 'success') {
                    var status = response.data.macAddrAcl
                    if(status == "0"){
                        document.getElementById("effective").innerText = "制限を有効"
                    }else if(status == "1"){
                        document.getElementById("effective").innerText = "制限を無効"
                    }
                    var data = response.data.whitelist
                    var box = document.getElementById("wifi-table").children[1]
                    for(var i = 0 ; i< data.length; i++) {
                        var item = data[i]
                        var tr = document.createElement('tr')
                        tr.innerHTML = `<td>${i + 1}</td>
                        <td>${item.deviceName}</td>
                        <td>${item.macAddress}</td>
                        <td><button onclick="delete_mac(${i})">削除</button></td>`
                        box.appendChild(tr)
                    }
                } else {
                    Message.showmsg('処理に失敗しました')
                }
            })
        }
        function freshen_click() {
            document.getElementById("wifi-table").children[1].innerHTML=""
            getData()
            Message.info('リストを端末に送信しました')
        }
        function white_list() {
            var effective = document.getElementById("effective")
            var macAddrAcl
            if(effective.innerText == "制限を有効"){
                macAddrAcl = "1"
            }else if(effective.innerText == "制限を無効"){
                macAddrAcl = "0"
            }
            var params = {
                macAddrAcl: macAddrAcl
            }
            console.log(params)
            Ajax.post(baseUrl + '/action/enableWhitelist',JSON.stringify(params),function(res) {
                var response = JSON.parse(res)
                if(response.status == 'success') {
                    setTimeout(function() {
                        window.location.reload()
                    }, 3000);
                    Message.info('設定しました。設定はWi-Fiルーターを次にONしたときに反映されます')
                } else {
                    Message.showmsg('処理に失敗しました')
                }
            })
        }
        function macAdd(){
            if(!document.getElementById("device_name").value) {
                Message.info('デバイス名を入力してください')
                return false
            }
            if(!document.getElementById("mac").value) {
                Message.info('MACアドレスを入力してください')
                return false
            }
            if(!macTest(document.getElementById("mac").value)) {
                Message.info('MACアドレスの形式が正しくありません')
                return false
            }
            var macAddress = document.getElementById("mac").value
            var deviceName = document.getElementById("device_name").value
            var params = {
                macAddress: macAddress,
                deviceName: deviceName,
                status: "1"
            }
            Ajax.post(baseUrl + '/action/whitelistAdd',JSON.stringify(params),function(res) {
                var response = JSON.parse(res)
                if(response.status == 'success') {
                    window.location.reload()
                } else {
                    Message.showmsg('処理に失敗しました')
                }
            })
        }
        function delete_mac(data) {
            var thisNode = document.getElementById("wifi-table").children[1].children[data]
            var macAddress = thisNode.children[2].innerText
            var deviceName = thisNode.children[1].innerText
            var params = {
                macAddress: macAddress,
                deviceName: deviceName,
                status: "0"
            }
            Ajax.post(baseUrl + '/action/whitelistAdd',JSON.stringify(params),function(res) {
                var response = JSON.parse(res)
                if(response.status == 'success') {
                    window.location.reload()
                } else {
                    Message.showmsg('処理に失敗しました')
                }
            })
        }
    </script>
</body>
</html>
